<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <el-button
          type="primary"
          style="float: right;"
          size="small"
          @click="showtable"
          v-show="false"
        >目标任务数据分析表</el-button>
      </div>
      <el-dialog
        center
        top="20px"
        title="目标任务数据分析表"
        :visible.sync="dialogVisibles"
        width="850px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <div style="text-align:center;margin-bottom:30px">
          <el-select
            class="userIntSize"
            v-model="quarter"
            clearable
            placeholder="请选择季度"
            @change="changeSelsct"
          >
            <el-option
              v-for="item in quarterLists"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div id="YmyChart"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

      <!-- <div class="list" id="taskScore"> -->
      <b
        style="margin-left:10px;font-size:14px;position: relative;top: -10px;"
      >{{ $route.query.name }}</b>
      <el-scrollbar class="page-component__scroll" style="height:100%">
        <div style="height:700px;">
          <el-table
            :header-cell-style="{ background: '#f5f5f5' }"
            border
            :data="tableData"
            style="width: 100%"
            height="680px"
            size="small"
            row-key="id"
            :tree-props="{ children: 'subtasks', hasChildren: 'hasChildren' }"
          >
            <el-table-column type="index" fixed="left" label="序号" align="center"></el-table-column>
            <el-table-column align="center" fixed="left" label="操作" width="200">
              <template
                slot-scope="scope"
                v-if="!scope.row.subtasks || scope.row.subtasks.length == 0"
              >
                <el-button type="text" @click="pathCheck(scope.row)">单位目标</el-button>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="160"
              prop="targetName"
              fixed="left"
              label="目标任务名称"
            ></el-table-column>
            <el-table-column
              align="center"
              width="160"
              fixed="left"
              prop="departmentName"
              label="牵头部门"
            ></el-table-column>
            <el-table-column align="center" label="一季度">
              <el-table-column align="center" width="50" prop="oneQuarterNumber" label="任务量"></el-table-column>
              <el-table-column align="center" width="100" label="实际完成量">
                <template slot-scope="scope">{{ scope.row.oneQuarterDegree }}</template>
              </el-table-column>
              <el-table-column align="center" width="100" label="描述">
                <template slot-scope="scope">
                  <el-popover
                    placement="top-start"
                    title="进度描述"
                    width="200"
                    trigger="click"
                    :content="scope.row.oneQuarterDegreeDescription"
                  >
                    <el-button slot="reference" class="describe">描述</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" width="100" label="附件">
                <template slot-scope="scope">
                  <el-button type="warning" size="mini" @click="handFileList(scope.row, 1)">附件</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="本季度完成率">
                <template slot-scope="scope">
                  {{
                  decimal(scope.row.degree1)
                  }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="全年目标完成率">
                <template slot-scope="scope">
                  {{
                  decimal(scope.row.allDegree1)
                  }}
                </template>
              </el-table-column>

              <el-table-column align="center" width="60" label="预警亮灯">
                <template slot-scope="scope">
                  <img
                    v-if="
                      scope.row.oneQuarterDegreeCaveat == null ||
                      scope.row.oneQuarterDegreeCaveat == 0
                        ? false
                        : true
                    "
                    :src="dataLamp(scope.row.oneQuarterDegreeCaveat)"
                  />
                </template>
              </el-table-column>

              <el-table-column align="center" width="60" label="审核状态">
                <template slot-scope="scope">
                  {{
                  degreeStatus(scope.row.oneQuarterDegreeStatus)
                  }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="二季度">
              <el-table-column align="center" width="50" prop="twoQuarterNumber" label="任务量"></el-table-column>
              <el-table-column align="center" width="100" label="实际完成量">
                <template slot-scope="scope">{{ scope.row.twoQuarterDegree }}</template>
              </el-table-column>
              <el-table-column align="center" width="100" label="描述">
                <template slot-scope="scope">
                  <el-popover
                    placement="top-start"
                    title="进度描述"
                    width="200"
                    trigger="click"
                    :content="scope.row.twoQuarterDegreeDescription"
                  >
                    <el-button slot="reference" class="describe">描述</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" width="100" label="附件">
                <template slot-scope="scope">
                  <el-button type="warning" size="mini" @click="handFileList(scope.row, 2)">附件</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="本季度完成率">
                <template slot-scope="scope">
                  {{
                  decimal(scope.row.degree2)
                  }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="全年目标完成率">
                <template slot-scope="scope">
                  {{
                  decimal(scope.row.allDegree2)
                  }}
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="预警亮灯">
                <template slot-scope="scope">
                  <img
                    v-if="
                      scope.row.twoQuarterDegreeCaveat == null ||
                      scope.row.twoQuarterDegreeCaveat == 0
                        ? false
                        : true
                    "
                    :src="dataLamp(scope.row.twoQuarterDegreeCaveat)"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="审核状态">
                <template slot-scope="scope">
                  {{
                  degreeStatus(scope.row.twoQuarterDegreeStatus)
                  }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="三季度">
              <el-table-column align="center" width="50" prop="threeQuarterNumber" label="任务量"></el-table-column>
              <el-table-column align="center" width="100" label="实际完成量">
                <template slot-scope="scope">{{ scope.row.threeQuarterDegree }}</template>
              </el-table-column>
              <el-table-column align="center" width="100" label="描述">
                <template slot-scope="scope">
                  <el-popover
                    placement="top-start"
                    title="进度描述"
                    width="200"
                    trigger="click"
                    :content="scope.row.threeQuarterDegreeDescription"
                  >
                    <el-button slot="reference" class="describe">描述</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" width="100" label="附件">
                <template slot-scope="scope">
                  <el-button type="warning" size="mini" @click="handFileList(scope.row, 3)">附件</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="本季度完成率">
                <template slot-scope="scope">
                  {{
                  decimal(scope.row.degree3)
                  }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="全年目标完成率">
                <template slot-scope="scope">
                  {{
                  decimal(scope.row.allDegree3)
                  }}
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="预警亮灯">
                <template slot-scope="scope">
                  <img
                    v-if="
                      scope.row.threeQuarterDegreeCaveat == null ||
                      scope.row.threeQuarterDegreeCaveat == 0
                        ? false
                        : true
                    "
                    :src="dataLamp(scope.row.threeQuarterDegreeCaveat)"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="审核状态">
                <template slot-scope="scope">
                  {{
                  degreeStatus(scope.row.threeQuarterDegreeStatus)
                  }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="全年">
              <el-table-column align="center" width="50" prop="allNumber" label="任务量"></el-table-column>
              <el-table-column align="center" width="100" label="实际完成量">
                <template slot-scope="scope">{{ scope.row.allDegree }}</template>
              </el-table-column>
              <el-table-column align="center" width="100" label="描述">
                <template slot-scope="scope">
                  <el-popover
                    placement="top-start"
                    title="进度描述"
                    width="200"
                    trigger="click"
                    :content="scope.row.allDegreeDescription"
                  >
                    <el-button slot="reference" class="describe">描述</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" width="100" label="附件">
                <template slot-scope="scope">
                  <el-button type="warning" size="mini" @click="handFileList(scope.row, 4)">附件</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="本季度完成率">
                <template slot-scope="scope">{{ decimal(scope.row.degree4) }}</template>
              </el-table-column>
              <el-table-column align="center" width="60" label="全年目标完成率">
                <template slot-scope="scope">
                  {{
                  decimal(scope.row.allDegree4)
                  }}
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="预警亮灯">
                <template slot-scope="scope">
                  <img
                    v-if="
                      scope.row.allDegreeCaveat == null ||
                      scope.row.allDegreeCaveat == 0
                        ? false
                        : true
                    "
                    :src="dataLamp(scope.row.allDegreeCaveat)"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="审核状态">
                <template slot-scope="scope">
                  {{
                  degreeStatus(scope.row.allDegreeStatus)
                  }}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
      <!-- 附件列表弹框 -->
      <el-dialog
        width="60%"
        title="附件列表配置"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
      >
        <el-table
          :data="fileTableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        >
          <el-table-column prop="file" label="附件名称">
            <template slot-scope="scope">
              <a :href="returnFile(scope.row.file)">{{ scope.row.file }}</a>
            </template>
          </el-table-column>
          <el-table-column label="上传时间">
            <template slot-scope="scope">
              {{
              scope.row.fileAddTime
              }}
            </template>
          </el-table-column>
          <el-table-column label="上传人" prop="userName"></el-table-column>
          <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="deleteFile(scope.row)"
              >删除</el-button
            >
          </template>
          </el-table-column>-->
        </el-table>
      </el-dialog>

      <!-- </el-scrollbar> -->
      <!-- </div> -->
    </el-card>
  </div>
</template>
<script>
import configJson from "../../api/config";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      subtasksId: "",
      departmentName: "",
      allNumberId: "",
      allNumber: "",
      message: "",
      dialogFormVisible: false,
      fileTableData: [],
      currVal: {},
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "全年" },
      ],
      form: {
        id: "",
        region: "",
      },
      dialogVisibles: false,
      quarterLists: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "全年" },
      ],
      quarter: "",
      secondAimsId: "",
      fileQuarter: "",
    };
  },
  mounted() {
    this.subtasksId = this.$route.query.id;
    this.departmentName = this.$route.query.departmentName;
    this.getListByPage();
  },
  methods: {
    returnFile(val) {
      return `${configJson.API_URL}/fileController/${val}`;
    },
    // 上传附件列表
    handFileList(row, index) {
      console.log(row);
      this.secondAimsId = row.id;
      this.fileQuarter = index;
      this.getfileList();
      this.dialogFormVisible = true;
    },
    // 获取附件列表
    getfileList() {
      this.$axios
        .post(`/fileController/getListDaily`, {
          taskId: this.$route.query.id,
          secondAimsId: this.secondAimsId,
          fileQuarter: this.fileQuarter,
          type: 1,
        })
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.fileTableData = res.data;
            this.fileName = "";
            this.fileList = [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 预警亮灯
    dataLamp(val) {
      let _url = "";
      if (val == 1) {
        _url = require("../../assets/img/yellowLight.png");
      } else if (val == 0 || val == null) {
        _url = require("../../assets/img/lv.png");
      } else {
        _url = require("../../assets/img/redLight.png");
      }
      return _url;
    },
    degreeStatus(val) {
      let _text = "";
      switch (val) {
        case 0:
          _text = "未提交";
          break;
        case 1:
          _text = "待审核";
          break;
        case 2:
          _text = "通过";
          break;
        default:
          _text = "驳回";
      }
      return _text;
    },
    // 保留小数点后两位
    decimal(val) {
      let _val = val * 100;
      _val = _val.toFixed(2);
      return _val + "%";
    },
    // 申请审核
    addPass(val, text) {
      this.id = val.id;
      this.type = text;
      this.currVal = val;
      this.dialogVisible = true;
    },
    // 列表查看
    pathCheck(val) {
      this.$router.push({
        path: "/targetListAudit_3",
        query: { id: val.id, name: val.targetName },
      });
    },
    // 获取数据列表
    getListByPage() {
      console.log(this.subtasksId);
      let _obj = {
        taskId: +this.subtasksId,
      };
      this.$axios
        .post(`/distribution/getList`, _obj)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.tableData = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showtable() {
      this.dialogVisibles = true;
      this.quarter = 1;
      setTimeout(() => {
        this.changeSelsct(1);
      }, 1000);
    },
    handleClose(done) {
      done();
    },
    changeSelsct(data) {
      // console.log(data)
      var name = [];
      var value = [];
      this.tableData.forEach((i) => {
        // i.targetName.forEach(item=>{
        if (data == 1) {
          name.push(i.targetName);
          value.push(i.degree1 * 100);
        } else if (data == 2) {
          name.push(i.targetName);
          value.push(i.degree2 * 100);
        } else if (data == 3) {
          name.push(i.targetName);
          value.push(i.degree3 * 100);
        } else if (data == 4) {
          name.push(i.targetName);
          value.push(i.degree4 * 100);
        }
        // })
      });
      // console.log(name)
      let YmyChart = this.$echarts.init(document.getElementById("YmyChart"));
      // 绘制图表
      YmyChart.setOption({
        title: {
          text: `“十项重点工作” ${data == 4 ? "全年" : data + "季度"}工作进度`,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b} : {c}%",
        },
        grid: {
          left: "0",
          right: "4%",
          top: "20%",
          bottom: "0",
          containLabel: true,
          // y2:150
        },
        xAxis: {
          data: name,
          type: "category",
          // position:'bottom',
          axisLabel: {
            textStyle: {
              //文字样式
              color: "#8c8c8c",
              fontSize: "13",
            },
            //X轴刻度配置
            interval: 0,
            // formatter: function(value) {
            //   return value.split('').join('\n')
            // },
            rotate: 75,
            // margin:100,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} %",
          },
        },
        series: [
          {
            data: value,
            type: "bar",
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.userIntSize {
  width: 60% !important;
}
#YmyChart {
  width: 100%;
  height: 580px;
  /* margin:50px 0; */
}
.light {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.light img {
  float: right;
  width: 16px;
  height: 16px;
  position: relative;
  left: 7px;
  top: -2px;
}
.light .el-radio {
  margin-right: 0px;
}
.reject {
  display: block;
  margin-bottom: 10px;
}
.describe {
  padding: 4px 4px;
}
</style>
